<template>
    <h3 >vant</h3>
    <van-button icon="circle" type="primary" plain>基础图标</van-button>
    <van-button icon="location" type="primary" plain>基础图标</van-button>
    <van-button icon="like" type="primary">实底风格</van-button>
    <van-button icon="phone-o" type="primary">线框风格</van-button>
    <van-button icon="shopping-cart-o" type="success">购物车</van-button>
    <van-button icon="shopping-cart" type="success" plain>购物车</van-button>
    <van-button :icon="icon" type="primary" plain>按钮</van-button>
    <van-button size="large" type="primary">大按钮</van-button>
    <!-- <van-button s type="success" block>块级按钮</van-button>
    <van-button size="large" type="warning" block>大块级按钮</van-button> -->
  <van-nav-bar title="登录组件"></van-nav-bar>
  <van-form @submit="onSubmit">
    <van-cell-group inset> 
    <van-field v-model="text" label="用户名" :rules="[{required:true,message:'请填写用户名'}]" clearable/>
    <van-field v-model="pass" type="password" label="密码" :rules="[{required:true,message:'请填写密码'}]"></van-field>
    <div>
        <van-button native-type="submit" block round type="primary">提交</van-button>
    </div>

  </van-cell-group>
  </van-form>
  <van-nav-bar title="轮播图"></van-nav-bar>
  <van-swipe :autoplay="2000" lazy-render > 
    <van-swipe-item v-for="image in imgs" :key="image">
        <img :src="image">
    </van-swipe-item>
  </van-swipe>
  <!-- <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
  <van-tabbar-item icon="search" to="/shopcart">查找</van-tabbar-item>
  <van-tabbar-item icon="friends-o" to="test1">用户</van-tabbar-item>
  <van-tabbar-item icon="setting-o" to="/vanttest">设置</van-tabbar-item>
</van-tabbar> -->

</template>
<script setup>
    import icon from "../assets/user-active.png";
   
    import{ref} from 'vue'
    const imgs = ['/images/01.jpg','/images/02.jpg','/images/03.jpg'];
    let text = ref('');
    let pass=ref('')
    const onSubmit = ()=>{
        console.log(text.value+','+pass.value)
    }
    const active = ref(1);
</script>
<style scoped>
.van-swipe{
  /* height: 200px; */
 text-align: center;
}
.van-swipe-item img{
    width:90%; 
    height: 200px;
    /* padding: 20px 30px;
    border:1px solid red;
    display: block;
    box-sizing: border-box; */
}
.van-button{
  /* display: block;
  box-sizing: border-box; */
  margin-bottom: 10px;
}
.van-swipe__indicator{
  background-color: black !important;
}
</style>